<template>
  <a-drawer
    title="博士考生入学考试报名登记表"
    wrapClassName="fullscreen"
    height="100%"
    placement="bottom"
    :closable="false"
    @close="handleCancel"
    :visible="editVisible" >
    <template v-if="infoIdx==0">
        <one-info ref="one" :disabledStop="false" :info="oneData" ></one-info>
    </template>
    <template v-else-if="infoIdx==1">
        <two-info ref="two" :disabledStop="false" :info="twoData"></two-info>
    </template>
    <template v-else-if="infoIdx==2">
        <three-info ref="three" :disabledStop="false" :info="threeData"></three-info>
    </template>
    <template v-else-if="infoIdx==3">
        <four-info ref="four" :disabledStop="false" :info="fourData"></four-info>
    </template>
    <template v-else-if="infoIdx==4">
        <five-info ref="five" :disabledStop="false" :info="fiveData"></five-info>
    </template>

    <div class="drawer-bootom-button" style="z-index:1">
        <div style="float:right">
            <a-button type="primary" @click="handlePrev" v-if="infoIdx>0">上一步</a-button>
            <a-button type="primary" @click="handleNext" v-if="infoIdx<4">下一步</a-button>
            <a-button type="primary" @click="handleSave" v-if="infoIdx==4">保存</a-button>
            <a-button type="primary" @click="handleCancel">关闭窗口</a-button>
        </div>
    </div>
  </a-drawer>
</template>

<script>

import OneInfo from './infoModule/one.vue'
import TwoInfo from './infoModule/two.vue'
import ThreeInfo from './infoModule/three.vue'
import FourInfo from './infoModule/four.vue'
import FiveInfo from './infoModule/five.vue'

export default {
  components: {
    OneInfo,
    TwoInfo,
    ThreeInfo,
    FourInfo,
    FiveInfo
  },
  props: {
    editVisible: {
      default: false
    }
  },
  data () {
    return {
      loading: false,
      postParams: {},
      imageUrl: '',
      oneData: {},
      selectMenu: {
        yx: [] // 院系
      },
      // 当前所在信息节点
      infoIdx: 0
    }
  },
  created () {
    // 设置信息一假数据
    this.oneData = {
      ksxm: '小李子',
      ksxmpy: 'XIAOLIZI'
    }
    // 设置信息二假数据
    this.twoData = {
      bz: '就写一个备注吧'
    }
    // 设置信息三假数据
    this.threeData = [{
      xm: '哈哈',
      ybrgx: '加',
      lxdh: '假的',
      gzdw: '呃',
      key: 5
    }]
    // 设置信息四假数据
    this.fourData = [{
      kssj: '1990/04/08',
      jssj: '1673/05/09',
      dw: 'php',
      zw: 'java',
      key: 1
    }]
    // 设置信息五假数据
    this.fiveData = {
      zjh: '3501421879124'
    }
  },
  methods: {
    // 关闭
    handleCancel () {
      this.$emit('close')
    },
    // 下一页
    handleNext () {
      let d
      switch (this.infoIdx) {
        case 0:
          d = this.$refs.one.GetInfo()
          break
        case 1:
          d = this.$refs.two.GetInfo()
          break
        case 2:
          d = this.$refs.three.GetInfo()
          break
        case 3:
          d = this.$refs.four.GetInfo()
          break
        case 4:
          d = this.$refs.five.GetInfo()
          break
      }
      // 验证通过处理数据
      if (d) {
        this.infoIdx++
        // 验证不通过不跳转下一页
      } else {
        console.log('哈哈')
        this.infoIdx++
      }
    },
    // 上一页
    handlePrev () {
      this.infoIdx--
    },
    // 保存修改
    handleSave () {

    }
  }
}
</script>

<style lang="less">
.fullscreen{
    .ant-drawer-wrapper-body{
        height: 100%;
        overflow: auto;
    }
}
</style>
